<template>
  <div>
    <sky-panel title="树形下拉">
      <template #main>
        <div>
          <sky-tree-select
            v-model:keyword="value"
            :data="data"
            :props="defaultProps"
            default-expand-all
          />
        </div>
      </template>
    </sky-panel>

  <sky-code-panel>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="html">

          &lt;sky-tree-select
            v-model:keyword="value"
            :data="data"
            :props="defaultProps"
            default-expand-all
          /&gt;

        </code>
        <code class="javascript">

        import { defineComponent, ref, reactive } from 'vue'

        export default defineComponent({
          setup() {
            const value = ref('三级')

            const data = reactive([
              {
                label: '一级 1',
                children: [
                  {
                    label: '二级 1-1',
                    children: [
                      {
                        label: '三级 1-1-1',
                      },
                    ],
                  },
                ],
              },
              {
                label: '一级 2',
                children: [
                  {
                    label: '二级 2-1',
                    children: [
                      {
                        label: '三级 2-1-1',
                      },
                    ],
                  },
                  {
                    label: '二级 2-2',
                    children: [
                      {
                        label: '三级 2-2-1',
                      },
                    ],
                  },
                ],
              },
              {
                label: '一级 3',
                children: [
                  {
                    label: '二级 3-1',
                    children: [
                      {
                        label: '三级 3-1-1',
                      },
                    ],
                  },
                  {
                    label: '二级 3-2',
                    children: [
                      {
                        label: '三级 3-2-1',
                      },
                    ],
                  },
                ],
              },
            ])

            const defaultProps = {
              children: 'children',
              label: 'label',
            }
            return {
              value,
              data,
              defaultProps,
            }
          },
        })
        </code>
    </pre>
    </div>
  </sky-code-panel>


  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'

export default defineComponent({
  setup() {
    const value = ref('三级')

    const data = reactive([
      {
        label: '一级 1',
        children: [
          {
            label: '二级 1-1',
            children: [
              {
                label: '三级 1-1-1',
              },
            ],
          },
        ],
      },
      {
        label: '一级 2',
        children: [
          {
            label: '二级 2-1',
            children: [
              {
                label: '三级 2-1-1',
              },
            ],
          },
          {
            label: '二级 2-2',
            children: [
              {
                label: '三级 2-2-1',
              },
            ],
          },
        ],
      },
      {
        label: '一级 3',
        children: [
          {
            label: '二级 3-1',
            children: [
              {
                label: '三级 3-1-1',
              },
            ],
          },
          {
            label: '二级 3-2',
            children: [
              {
                label: '三级 3-2-1',
              },
            ],
          },
        ],
      },
    ])

    const defaultProps = {
      children: 'children',
      label: 'label',
    }
    return {
      value,
      data,
      defaultProps,
    }
  },
})
</script>
